<template>
  <el-dialog custom-class="app_dialog" :close-on-click-modal="!props.appDialog.closeModal" v-model="props.appDialog.visible" :width="props.appDialog.width" destroy-on-close :append-to-body="props.appDialog.append" :before-close="handleClose">
    <template #header>
      <div class="dialog_header">{{ props.appDialog.title }}</div>
    </template>
    <section>
      <el-scrollbar class="dialog_scrollbar">
        <slot></slot>
      </el-scrollbar>
    </section>
    <template #footer v-if="!props.appDialog.isHiddenFoot">
      <div class="footer">
        <div>
          <span v-show="props.appDialog.showFootcontent" class="text">{{ props.appDialog.footContent }}</span>
        </div>
        <span class="dialog_footer">
          <el-button v-if="props.appDialog.moreBtn" @click="props.appDialog.moreBtn">{{ props.appDialog.moreBtnText }} </el-button>
          <el-button v-if="props.appDialog.cancel" @click="props.appDialog.cancel">{{ props.appDialog.cancelText }} </el-button>
          <el-button v-if="props.appDialog.save" @click="props.appDialog.save">{{ props.appDialog.saveText }} </el-button>
          <el-button v-if="props.appDialog.submit" :disabled="props.appDialog.isDisable" :type="!props.appDialog.isDisable ? 'primary' : 'info'" @click="props.appDialog.submit">{{ props.appDialog.submitText }}</el-button>
        </span>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { defineProps, ref, reactive } from 'vue'
  interface Props {
    isHiddenFoot?: boolean
    width?: '30%'
    visible: boolean
    showFootcontent?: false
    footContent?: ''
    title: string
    append?: boolean
    uploadShow?: boolean
    cancelText?: string
    saveText?: string
    submitText?: string
    moreBtnText?: string
    isDisable?: boolean
    cancel?: () => void
    save?: () => void
    submit?: () => void
    moreBtn?: () => void
  }
  const emit = defineEmits(['close'])
  const props = defineProps<{
    appDialog: {
      type: Props
      require: true
    }
  }>()

  const handleClose = (done: () => void) => {
    props.appDialog.cancel && props.appDialog.cancel()
    done()
    emit('close')
  }

  const upload = (val: any) => {}
</script>
<style lang="scss">
  $maxHeight: 500px;

  .app_dialog {
    .el-dialog__header {
      padding: 0px;

      .el-dialog__headerbtn {
        right: 4px;
        top: 0;

        .el-dialog__close {
          font-size: 20px;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #969696;
        line-height: 14px;
      }
    }

    .el-dialog__body {
      padding: 10px 20px;
      max-height: $maxHeight;
      box-sizing: border-box;
    }

    .dialog_header {
      height: 50px;
      display: flex;
      padding: 0 0 0 20px;
      align-items: center;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #33302d;
      line-height: 16px;
      border-bottom: 1px solid var(--el-border-color-base);
    }

    .dialog_scrollbar{
      height: calc($maxHeight - 100px);
    }

    .el-dialog__footer {
      height: 60px;
      box-sizing: border-box;
      padding: 10px 30px;
      border-top: 1px solid var(--el-border-color-base);

      .el-button {
        height: 36px;
        min-height: auto;
      }

      .upload_demo {
        display: inline-block;
        cursor: pointer;
      }
    }

    .ml20 {
      margin-left: 20px;
    }
  }
</style>
